<template>
    <div>
        <!-- 内容 -->
        <div class="content">
            <div class="titleClass" style="margin-top: 14px;">
                <img style="margin:9px 12px 10px 11px;width:17px;height: 17px;" src="../../../assets/images/矩形装饰.png">
                风力监测
            </div>
            <div class="contentClass" style="overflow: auto;flex-direction:column;">
                <van-notice-bar v-if="windInfo.warnmsg"
                    style="height:24px;font-size: 10px;margin: 0 14px;border: 1px solid #FFBFBF;border-radius: 2px;"
                    color="#FF2626" background="rgba(255, 242, 242, 0.20)" mode="closeable">{{ windInfo.warnmsg
                    }}</van-notice-bar>

                <div class="flrow1" style="margin:0px  12px;">
                    <div class="speedStyle">
                        <div class="bgStyle speedStyle">{{ windInfo.winddirect }}</div>
                        <div>风向</div>
                    </div>
                    <div class="speedStyle">
                        <div class="bgStyle speedStyle">{{
                            windInfo.windspeed }}m/s</div>
                        <div>风速</div>
                    </div>
                </div>
            </div>
            <div class="titleClass" style="margin-top: 14px;">
                <img style="margin:9px 12px 10px 11px;width:17px;height: 17px;" src="../../../assets/images/矩形装饰.png">
                环境监测
            </div>
            <van-grid :border="false" direction="horizontal" :column-num="3">
                <van-grid-item v-for="(item, index) in fugitiveDust" :key="index">
                    <div class="flexLR">
                        <img style="width: 40px;height: 40px;" :src="item.img" alt="">
                        <div style="width: 80px;margin-left: 2px;">
                            <p style="text-align: left;text-overflow: ellipsis;overflow: hidden;margin-bottom: 5px;">{{
                                item.name }}</p>
                            <p style="width: 99%;text-align: right;text-overflow: ellipsis;overflow: hidden;">{{
                                item.value
                            }}&nbsp;{{
    item.unit }}</p>
                        </div>
                    </div>
                </van-grid-item>
            </van-grid>

            <!-- <div class="contentClass" style="height: 138px;overflow: auto;flex-wrap: wrap;">
                <div class="flrow" style=" margin: 0px 0px 7px 10px;" v-for="(item, index) in fugitiveDust"
                    :key="index">
                    <img style="width: 38px;height: 38px;" :src="item.img" alt="">
                    <div style="
                    margin-right: 0px;
                    width: 65%;
                    display: flex; 
                    flex-direction: column;
                    text-align: center;
                    position: relative;">
                        <div class="flrowName2">
                            <span style="margin-top: 0px;">{{ item.name }}</span>
                        </div>
                        <div class="flrowName1">
                            <div class="span1 ">
                                <span v-if="item.value != '--' && (item.value + '').length < 6"
                                    style="font-size: 12px;">{{
                                        (item.value + '').substring(0, 6)
                                    }}</span>
                                <span v-else @click="ToastChange(item)" style="font-size: 12px"> {{
                                    (item.value + '').substring(0, 6)
                                    }}</span>
                                <span style=" font-size: 12px;margin-left: 2px;">{{ item.unit }}</span>
                            </div>

                        </div>
                    </div>
                </div>
            </div> -->
        </div>

    </div>
</template>

<script name="Home">
import { defineComponent, ref, reactive, onMounted } from "vue";
import { GetEnvironmentIndex, } from "@/api";
import { useAppStore } from "../../../store";
import { showToast, showFailToast } from "vant";
export default defineComponent({
    setup() {
        const { userInfo, projectInfo } = useAppStore()
        const windInfo = ref({
            winddirect: '--',
            windspeed: "--"
        })
        const fugitiveDust = ref([
            {
                name: '湿度',
                value: '--',
                img: new URL("@/assets/images/data/湿度.png", import.meta.url).href,
                unit: '%rh'
            },
            {
                name: '温度',
                value: '--',
                img: new URL("@/assets/images/data/温度.png", import.meta.url).href,
                unit: '℃'
            },
            {
                name: 'PM2.5',
                value: '--',
                img: new URL("@/assets/images/data/PM25.png", import.meta.url).href,
                unit: 'ug/m³'
            },
            {
                name: '噪音',
                value: '--',
                img: new URL("@/assets/images/data/噪音.png", import.meta.url).href,
                unit: 'dB'
            },

            {
                name: '气压',
                value: '--',
                img: new URL("@/assets/images/data/气压.png", import.meta.url).href,
                unit: 'kpa'
            },
            {
                name: 'PM10',
                value: '--',
                img: new URL("@/assets/images/data/PM10.png", import.meta.url).href,
                unit: 'ug/m³'
            },
        ]);
        const GetEnvironmentIndex_FB = async () => {
            const res = await GetEnvironmentIndex({ projectId: projectInfo.id })
            if (res.data) {
                res.data.wind ? windInfo.value = res.data.wind : windInfo.value;
                // res.data.raisedust && res.data.raisedust.windspeed != null ? windInfo.value.windspeed = res.data.raisedust.windspeed : windInfo.value.windspeed;
                // res.data.wind && res.data.wind.winddirect != null ? windInfo.value.winddirect = res.data.wind.winddirect : windInfo.value.winddirect
                fugitiveDust.value.map((item) => {
                    switch (item.name) {
                        case '湿度':
                            res.data.humidity && res.data.humidity.length > 0 ? item.value = res.data.humidity[0].val : item.value
                            break;
                        case '温度':
                            res.data.temperature && res.data.temperature.length > 0 ? item.value = res.data.temperature[0].val : item.value
                            break;
                        case '噪音':
                            res.data.noise && res.data.noise.length > 0 ? item.value = res.data.noise[0].val : item.value
                            break;
                        case 'PM10':
                            res.data.raisedust && res.data.raisedust.pm10 != null ? item.value = res.data.raisedust.pm10 : item.value
                            break;
                        case '气压':
                            res.data.raisedust && res.data.raisedust.atmos != null ? item.value = res.data.raisedust.atmos : item.value
                            break;
                        case 'PM2.5':
                            res.data.raisedust && res.data.raisedust.pm25 != null ? item.value = res.data.raisedust.pm25 : item.value
                            break;
                        default:
                            break;
                    }
                })
            }
        }
        const ToastChange = (item) => {
            showToast(item.value);
        }
        onMounted(() => {
            GetEnvironmentIndex_FB()
        });


        return {
            fugitiveDust,
            ToastChange,
            windInfo,
        };
    },
});
</script>

<style lang="less" scoped>
.content {
    width: 100%;
    height: 100%;
    overflow: auto;
    scrollbar-width: none // 隐藏滚动条样式
}

.titleClass {
    height: 72px;
    width: 100%;
    font-size: 32px;
    display: flex;
    align-items: center;
    background: url('../../../assets/images/Group9436.png') no-repeat;
    background-size: 100% 100%;
}

.contentClass {
    display: flex;
    justify-content: start;
    padding: 28px 0px;
    background-color: rgba(33, 46, 90, 0.5);
    position: relative;
}

.speedStyle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.flrow1 {
    display: flex;
    justify-content: space-around;
    height: 228px;
    background: url('../../../assets/images/data/矩形.png') no-repeat;
    background-size: cover;

    .bgStyle {
        width: 158px;
        height: 120px;
        background: url('../../../assets/images/data/编组 88.png') no-repeat;
        background-size: cover;
    }
}

.flrow {
    display: flex;
    width: 196px;
    justify-content: flex-start;
    align-items: center;

    .flrowName2 {
        display: flex;
        flex-direction: column;
        text-align: center;
        height: 42px;
        justify-content: center;
        font-size: 28px;
        text-align: left;
    }

    .flrowName1 {
        display: flex;
        flex-direction: column;
        text-align: center;
        text-align: right;

    }
}

:deep(.van-grid-item__content) {
    background-color: rgba(33, 46, 90, 0.5);
}
</style>